<template>
  <div class="nav-sub" :style="{ left: navSubLeft + 'px' }">
    <div class="nav-sub-passway">
      <div class="nav-sub-trangle-left"></div>
    </div>
    <div class="menu" ref="menu">
      <div class="menu-cover">
        <div
          class="menu-group"
          v-for="(menu, id) of sortedSubNavList"
          :key="id"
        >
          <span class="menu-group-name">{{
            $srv.getI18nBySrv(menu.groupName)
          }}</span>
          <div class="menu-group-content y-scroll">
            <!-- :style="{ 'margin-bottom': item.isDivide ? '15px' : 0 }" -->
            <div v-for="(item, idx) of menu.groupMembers" :key="idx">
              <div class="menu-unit">
                <div
                  class="menu-item"
                  @mouseenter="navMouseEnter($event, item)"
                  @mouseleave="navMouseLeave($event, item)"
                  :style="{
                    borderBottom: item.isDivide ? '1px solid #e6e6e6' : 'none'
                  }"
                >
                  <span :class="'wy-icon ' + item.iconName + ' front-icon'" />
                  <!-- <div
                    class="menu-btn"
                    @click="menuClick(item, $event)"
                    :name="item.id"
                    :title="$srv.getI18nBySrv(item.title)"
                    :funid="item.funID"
                    :field="item.title"
                  >
                    <span>{{ $srv.getI18nBySrv(item.title) }}</span>
                    <div
                      class="menu-subchilren"
                      :style="secondNavStyle"
                      v-if="
                        item.children !== null && item.title === currentFirstNav
                      "
                    >
                      <p
                        :class="'menu-btn ' + 'ps'"
                        v-for="(item, idx2) of item.children"
                        :key="idx2"
                        @click="menuClick(item, $event)"
                        :title="$srv.getI18nBySrv(item.title)"
                        :funid="item.funID"
                        :field="item.title"
                      >
                        <span
                          :class="'wy-icon ' + item.iconName"
                          style="line-height: 2; margin-right: 5px"
                        />
                        <b class="arrow-text">{{
                          $srv.getI18nBySrv(item.title)
                        }}</b>
                      </p>
                    </div>
                  </div>
                  <span
                    :class="'wy-icon ' + 'wy-fanhui'"
                    style="line-height: 2"
                    v-if="item.children !== null"
                  /> -->
                  <!-- 修改版 -->
                  <Dropdown placement="right-end">
                    <div @click="menuClick(item, $event)">
                      <span>
                        {{ $srv.getI18nBySrv(item.title) }}
                      </span>
                      <span
                        :class="'wy-icon ' + 'wy-fanhui'"
                        style="line-height: 1.5"
                        v-if="item.children !== null"
                      />
                    </div>

                    <template #list>
                      <DropdownMenu
                        v-if="
                          item.children !== null &&
                            item.title === currentFirstNav
                        "
                      >
                        <DropdownItem
                          v-for="(item, idx2) of item.children"
                          :key="idx2"
                          :funid="item.funID"
                          :field="item.title"
                          ><div class="menu-box-btn">
                            <div @click="menuClick(item, $event)">
                              <span
                                :class="'wy-icon ' + item.iconName"
                                style="line-height: 2; margin: 0 5px"
                              />
                              <span>{{ $srv.getI18nBySrv(item.title) }}</span>
                            </div>
                          </div></DropdownItem
                        >
                      </DropdownMenu>
                    </template>
                  </Dropdown>
                </div>
              </div>
              <!-- <Divider v-if="item.isDivide" /> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { N_home, T_srv, Tsrv, ifs, ts, vue } from './config';

@T_srv.comp
export default class navSub extends vue {
  @T_srv.prop({ required: true }) subNavList!: Array<N_home.navGroup>;

  @T_srv.prop({ required: true }) readonly navSubLeft!: number;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  private currentFirstNav: string = '';

  private secondNavStyle: object = {
    // display: 'none',
    left: '',
    top: '',
    transition: 'ease-in-out 0.2s',
    opacity: 1,
    transform: 'scaleX(1)'
  };

  get sortedSubNavList(): Array<N_home.navGroup> {
    this.subNavList.forEach(el => {
      el.groupMembers = Tsrv.utils.sortBy(el.groupMembers, 'sn');
    });
    return this.subNavList;
  }

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    // 如果外部有传入组件信息
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
  }

  mounted() {
    this.GT_compBox.addCompMergeName(this.G_compID, `navSub`, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    // 暂时弃用
    // this.menuMousewheel();
  }

  destroyed() {
    // 如果父组件传入的compBoxInfo则删除本文件产生的引用，反之是本组件产生的ID统一删除
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, ['navSub']);
    }
  }

  public menuClick(item: any, e: any): void {
    if (Tsrv.utils.noValue(item.funID)) {
      return;
    }
    e.stopPropagation();
    this.GT_compBox.getCompMergeName(this.G_compID, 'rootNav').navsubMenuClick({
      funID: item.funID,
      funName: item.title
    });
  }

  public navMouseLeave(e: any, item) {
    // if (e.target.children.length === 2) {
    //   this.secondNavStyle['display'] = 'none';
    // }
    this.currentFirstNav = item.title;
    // this.secondNavStyle['display'] = 'none';
  }

  public navMouseEnter(e: any, item): void {
    this.currentFirstNav = item.title;
    this.secondNavStyle = {
      display: 'flex',
      'flex-direction': 'column',
      position: 'absolute',
      transition: 'ease-in-out 0s',
      opacity: 0,
      transform: 'scaleX(0.8)',
      'border-radius': '20px',
      'background-color': '#fff',
      padding: '10px',
      'box-shadow': '0 16px 32px 0 rgba(48, 55, 66, 0.15)'
    };
    this.$nextTick(() => {
      if (e.target.children.length === 3) {
        const menuElTop = e.target.closest('.menu').getBoundingClientRect().top; // 找到离事件目标最近的父div元素
        let top: number = e.target.getBoundingClientRect().top - menuElTop;
        let left: number = e.target.getBoundingClientRect().right;
        const navDiv = e.target.children[1];
        const triDiv = navDiv.children[0];
        const subNavHeight = navDiv.children[0].clientHeight;
        const subNavWidth = navDiv.children[0].clientWidth;
        const screenHeight = document.body.clientHeight; // 文档的高度
        // top -= subNavHeight / 2;
        top = top - subNavHeight / 2 - 8;
        // left -= subNavWidth;
        // left = left - subNavWidth - 70;
        left = left - subNavWidth - 170;
        const distance = screenHeight - subNavHeight; // 比较数
        if (distance < top) {
          // 未调整menu下溢出
          triDiv.style.top = `${top - distance + subNavHeight}px`; // 三角的位置
          top = distance; // subNav的新位置
        } else if (top < 0) {
          // 未调整menu上溢出
          triDiv.style.top = `${top + subNavHeight}px`;
          top = 0;
        } else {
          triDiv.style.top = `${subNavHeight}px`; // 三角的位置
        }
        this.secondNavStyle = {
          display: 'flex',
          'flex-direction': 'column',
          position: 'absolute',
          top: `${top}px`,
          left: `${left}px`,
          'border-radius': '10px',
          'background-color': '#fff',
          padding: '10px',
          'box-shadow': '0 16px 32px 0 rgba(48, 55, 66, 0.15)'
        };
      }
    });
  }

  // 注册鼠标滚轮事件
  public menuMousewheel(): void {
    const menu = this.$refs.menu as HTMLElement;
    // scrollWidth scrollHeight clientWidth clientHeight
    menu.addEventListener('wheel', event => {
      event.preventDefault();
      if (
        menu.scrollWidth > menu.clientWidth &&
        menu.scrollHeight === menu.clientHeight
      ) {
        if (event.deltaY < 0) {
          menu.scrollLeft -= 20;
        } else {
          menu.scrollLeft += 20;
        }
      } else if (
        menu.scrollHeight > menu.clientHeight &&
        menu.scrollWidth === menu.clientWidth
      ) {
        if (event.deltaY < 0) {
          menu.scrollTop -= 20;
        } else {
          menu.scrollTop += 20;
        }
      } else if (
        menu.scrollWidth > menu.clientWidth &&
        menu.scrollHeight > menu.clientHeight
      ) {
        if (event.deltaY < 0) {
          menu.scrollLeft -= 20;
          menu.scrollTop -= 20;
        } else {
          menu.scrollLeft += 20;
          menu.scrollTop += 20;
        }
      }
    });
  }
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.nav-sub {
  width: unset;
  height: unset;
  z-index: 1000;
  cursor: default;
  left: 160px;
  top: 0px;
  position: absolute;
  transform-origin: center left;
  background-color: #fff;
}

/*左三角*/
.nav-sub-passway {
  position: absolute;
  width: 15px;
  height: 46px;
  top: 0;
  left: -15px;
  cursor: pointer;
  background-color: transparent;
  .nav-sub-trangle-left {
    position: absolute;
    top: 20px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 0px 10px 0px 1px;
    transform: rotate(45deg);
    z-index: 3;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  }
}
.menu {
  font-size: 13px;
  width: max-content;
  // overflow: auto;
  position: absolute;
  z-index: 2;
  padding: 10px 0;
  border-radius: var(--default-border-radius-base);
  background-color: var(--navSub-bg-color);
  box-shadow: var(--default-box-shadow-down);
  .menu-item {
    display: flex;
    padding: 2px 7px;
    border-radius: 5px;
    &:hover {
      color: var(--navSub-hover-font-color);
      background-color: var(--navSub-hover-bg-color);
      border-radius: 10px;
    }
    .front-icon {
      line-height: 2;
    }
    .menu-btn {
      cursor: pointer;
      transition: var(--animation-hover);
      border-radius: 10px;

      color: var(--theme-fontColor-2);
      padding: 6px 5px;
      &:hover {
        color: var(--navSub-hover-font-color);
        background-color: var(--navSub-hover-bg-color);
      }
    }
  }

  .menu-cover {
    max-height: 100vh;
    display: flex;
    flex-direction: row;
    padding: 0 5px;
    .menu-group {
      border-right: 1px dashed #ccc;
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      margin: 10px 0;
      &:last-child {
        border-right: 0;
      }
      .menu-group-name {
        color: var(--navSub-font-color);
        padding: 6px 10px;
        font-weight: bold;
      }
      .menu-group-content {
        width: fit-content;
        display: flex;
        flex-direction: column;
        .menu-unit {
          display: flex;
          align-items: center;
          flex-direction: row;

          .menu-subchilren {
            z-index: 1;
            display: flex;
            flex-direction: row;
            position: absolute;
            border-radius: 10px;
            background-color: #fff;
            .ps {
              padding: 0 5px;
              font-weight: 100;
              white-space: nowrap;
            }
            // .menu-btn {
            // display: flex;
            // &:hover {
            //   color: var(--default-hover-font-color);
            //   background-color: #f1f1f1;
            //   border-radius: 20px;
            // }
            // .arrow {
            //   display: block;
            //   height: 100%;
            //   padding: 0 3px;
            //   line-height: 31px;
            //   font-weight: normal;
            //   color: #ccc;
            // }
            // .arrow-text {
            //   line-height: 2.5;
            // }
            // }
          }
        }
      }
    }
  }

  ::v-deep .ivu-dropdown {
    .ivu-dropdown-rel {
      height: 100%;
      line-height: 2.5;
      margin-left: 5px;
    }

    .ivu-select-dropdown {
      .ivu-dropdown-menu {
        .ivu-dropdown-item {
          padding: 0;
        }
      }
    }
  }
}
</style>
